<template>
	<view class="main">
		<scroll-view scroll-y v-if="mybooks.length">
			<u-swipe-action>
			<u-swipe-action-item class="enabled_left_move" :show="item.show" :index="index" v-for="(item, index) in mybooks" :key="item.goods_id" @click="click" :options="options">
				<navigator  @click="$tools.goJump('/pages/zuche/view',{id:item.goods_id},'','')" class="u-flex u-border-bottom" style="height: 80px;">
					<view class="u-flex-x-center u-padding-20">
						<u--image :showLoading="true" :src="item.cover" width="60px" height="60px" radius="6"></u--image>
					</view>
					<view class="u-p-r-20 u-line-2">{{ item.name }}</view>
				</navigator>
				
			</u-swipe-action-item>
			</u-swipe-action>
		</scroll-view>
		<navigator class="no_book_tips" hover-class="none" url="/pages/index/index" open-type="switchTab" v-else><u-icon name="plus" color="#ddd" size="100"></u-icon></navigator>
	</view>
</template>

<script>



export default {
	data() {
		return {
			no_book_tips: '还没有收藏,立即去添加',
			mybooks: [],
			mybookids: [],
			localbookids: [], //本地图书id，书名md5
			startX: 0,
			remove_index: -1,
			left: '0rpx',
			bookWidth: 150,
			show: false,
			menu: [
				{
					text: '导入',
					color: '#2979ff',
					fontSize: 38
				}
			],
			options: [
				{
					text: this.$t('del_btn'),
					style: {
						backgroundColor: '#dd524d'
					}
				}
			]
		};
	},

	onLoad: function() {
		uni.setNavigationBarTitle({title: this.$t('pagetitle.favorites')});
	},
	onShow: function() {
		
		let hasid = uni.getStorageSync('goodsFavorite');
		console.log('hasid111',hasid)
		let that = this;
		if (!hasid) {
			this.mybookids = [];
		} else if (hasid.join('.') != this.mybookids.join('.')) {
			// 有变化
			console.log('bbb',that.mybooks)
			this.mybookids = hasid;
			hasid.forEach(it => {
				uni.getStorage({
					key: 'goodsFavorite-' + it,
					success: function(res) {
						
						if (res.data && !that.inmybooks(res.data.goods_id)) {
							// 只有当hasid中对应图书不在 this.mybooks中才压入
							that.mybooks.push(res.data);
							console.log('aaaa',res)
						}
					}
				});
			});
			console.log(this.mybooks)
			// 当前图书不存在与 hasid中，需要删除
			// for (let i = 0, len = this.mybooks.length; i < len; i++) {
			// 	let pos = hasid.indexOf(this.mybooks[i]['goods_id']);
			// 	if (pos === -1) {
			// 		this.mybooks.splice(pos, 1);
			// 	}
			// }
		}
		
		// #ifdef APP-PLUS
		
		plus.navigator.setFullscreen(false);
		// #endif
		
	},
	methods: {
		click(index) {
			index=index.index
			let b = this.mybooks[index] 
			let book_id=b.goods_id;
			var that = this;
			uni.showModal({
                title: this.$t('desc_favtips'),
                content: this.$t('desc_delfav'),
				confirmText: this.$t('confirm'),
				cancelText: this.$t('cancel'),
				success: res => {
					if (res.confirm) {
						this.mybooks.splice(index, 1);
						// 先从 mybooks 里删掉该书
						for (let i = 0, len = that.mybooks.length; i < len; i++) {
							if (that.mybooks[i].goods_id == book_id) {
								that.mybooks.splice(i, 1);
								break;
							}
						}


						// 网络图书
						let hasid = uni.getStorageSync('goodsFavorite');
						hasid=hasid?hasid:[]
						let pos = hasid.indexOf(parseInt(book_id));
						// 当前删除
						if (pos > -1) {
							hasid.splice(pos, 1);
							uni.setStorageSync('goodsFavorite', hasid);
							this.mybookids = hasid;
						}
					}
				}
			});
		},
		showact() {
			uni.hideTabBar();
			this.show = true;
		},
		hideact() {
			this.show = false;
			setTimeout(() => {
				uni.showTabBar();
			}, 300);
		},

		inmybooks(id) {
			for (let i = 0, len = this.mybooks.length; i < len; i++) {
				if (id == this.mybooks[i]['goods_id']) {
					return true;
				}
			}
			return false;
		}
	
	}
};
</script>
<style>
.no_book_tips {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 600rpx;

	line-height: 600rpx;
	color: #888;
}
.enabled_left_move {
	position: relative;
}
.durg {
	padding: 15px 20px;
}
.durg_info{
}

</style>
